<template>
  <el-container class="all">
    <el-aside width="200px">
      <!-- 左侧树菜单 -->
      <el-menu
        :default-active="currentHash"
        class="el-menu-vertical-demo"
        text-color="#fffef9"
        active-text-color="#2F74B1"
        router
        background-color="#20222A"
        unique-opened
      >
        <div class="title">外卖商家中心</div>
        <!-- 不可展开菜单 -->
        <div v-for="item in powerarr" :key="item.url">
          <el-menu-item :index="item.url" v-if="!item.children">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
          <!-- 不可展开菜单 -->
          <el-submenu :index="item.url" v-else>
            <!-- 大标题的名字 -->
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.url"
              :index="child.url"
              >{{ child.name }}</el-menu-item
            >
          </el-submenu>
        </div>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <!-- 头部 -->
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="(item, index) in breadList"
              :key="index"
              >{{ item }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div style="display: flex; align-items: center">
          <span>欢迎您，{{ username }}</span>

          <img
            style="width: 60px; border-radius: 50%; margin-left: 10px"
            :src="imgUrl"
          />
        </div>
      </el-header>
      <el-main>
        <!-- 路由配置的二级页面的入口文件 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { checkToken, userImg } from "../../api/apis";
export default {
  data() {
    return {
      username: "", //用户名
      // 动态树状菜单
      list: [
        {
          // ---------------------首页管理模块-----------------------------
          url: "/main/index",
          icon: "el-icon-message-solid",
          name: "后台首页",
          roles: ["super", "normal"],
        },
        {
          // ---------------------订单管理模块-----------------------------
          url: "/main/order",
          icon: "el-icon-s-order",
          name: "订单管理",
          roles: ["super", "normal"],
        },
        {
          // ---------------------商品管理模块-----------------------------
          url: "/main/item",
          icon: "el-icon-document",
          name: "商品管理",
          children: [
            { url: "/main/itemlist", name: "商品列表" },
            { url: "/main/additem", name: "添加商品" },
            { url: "/main/itemsort", name: "商品分类" },
          ],
          roles: ["super", "normal"],
        },
        // ---------------------店铺管理模块-----------------------------
        {
          url: "/main/shop",
          icon: "el-icon-s-shop",
          name: "店铺管理",
          roles: ["super"],
        },
        {
          // ---------------------账号管理模块-----------------------------
          url: "/main/user",
          icon: "el-icon-s-custom",
          name: "账号管理",
          children: [
            { url: "/main/UserList", name: "账号列表" },
            { url: "/main/UserAdd", name: "添加账号" },
            { url: "/main/UserEdit", name: "修改用户" },
          ],
          roles: ["super"],
        },
        {
          // ---------------------销售统计模块-----------------------------
          url: "/main/sell",
          icon: "el-icon-data-analysis",
          name: "销售统计",
          children: [
            { url: "/main/sellTotal", name: "商品统计" },
            { url: "/main/orderTotal", name: "订单统计" },
          ],
          roles: ["super"],
        },
      ],
      currentHash: "", //当前hash值
      imgUrl: "", //用户头像url
      breadList: [], //面包屑数据
      UPLOAD_HEAD_IMG: "", //上传图片的地址
      uploadData: {},
    };
  },
  // 生命周期函数
  created() {
    // 获取当前的hash值
    this.currentHash = this.$route.name;
    // 发送请求验证token是否失效
    checkToken(localStorage.token).then((res) => {
      if (res.data.code == 0) {
        // token令牌有效
        this.username = localStorage.acc;
      } else {
        // token令牌实现
        this.username = "请登录";
      }
    });
    // 获取账号信息(用户头像)
    userImg(localStorage.id).then((res) => {
      this.imgUrl = res.data.accountInfo.imgUrl;
    });
    // 监听bus的传递事件
    this.$bus.$on("imgUploadFinish", () => {
      userImg(localStorage.id).then((res) => {
        this.imgUrl = res.data.accountInfo.imgUrl;
      });
    });
    // 初始化给二级导航赋值，面包屑
    this.breadList = this.$route.meta.breadList;
  },
  // 计算属性
  computed: {
    powerarr() {
      let newarr = this.list.filter((item) => {
        return item.roles.includes(localStorage.role);
        //如果我里面的list.roles包含登陆信息时传过来的role那么也就是说从list里面筛选
        // [“super”,”normal”]includes(“super”)那么就是ture，就会从list中，return这个出去
        // [“super”]includes(“normal”)那么就是false，这个数据就不会return出去
      });
      return newarr;
    },
  },
  // watch监听属性
  watch: {
    // 面包屑功能
    $route(to) {
      this.breadList = to.meta.breadList;
    },
  },
  methods: {
    handleAvatarSuccess(res) {
      if (res.code == 0) {
        // 发出通知

        this.$bus.$emit("imgUploadFinish");
      }
    },
  },
};
</script>
<style lang="less">
@baseColor: #20222a;

.all {
  height: 100%;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: honeydew;
}
.el-aside {
  background-color: @baseColor;
  .el-menu {
    border: 0;
    background-color: @baseColor;
    .title {
      color: #fff;
      text-indent: 30px;
      line-height: 40px;
    }
  }
}
</style>
